<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人资料 - Qwen Coder</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- Three.js宇宙背景容器 -->
    <div id="background-container"></div>
    
    <!-- 主要内容 -->
    <div class="main-container">
        <!-- 头部导航 -->
        <header class="site-header">
            <div class="container">
                <div class="header-content">
                    <div class="logo">
                        <h1>Qwen Coder</h1>
                    </div>
                    <nav class="main-nav">
                        <ul>
                            <li><a href="index.html">首页</a></li>
                            <li><a href="topics.html">话题中心</a></li>
                            <li><a href="blog.html">博客文章</a></li>
                            <li><a href="discussions.html">讨论串</a></li>
                            <li><a href="profile.html" class="active">个人资料</a></li>
                        </ul>
                    </nav>
                    <div class="user-actions">
                        <button id="new-post-btn" class="glow-button">发帖</button>
                    </div>
                </div>
            </div>
        </header>

        <!-- 页面内容 -->
        <main class="site-main">
            <div class="container">
                <section class="profile-header">
                    <h2>我的个人资料</h2>
                </section>

                <section class="profile-content">
                    <div class="profile-card content-card">
                        <div class="profile-info">
                            <div class="avatar-placeholder">
                                <span>头像</span>
                            </div>
                            <div class="user-details">
                                <h3>Qwen开发者</h3>
                                <p>全栈工程师 | AI爱好者 | 开源贡献者</p>
                                <div class="user-stats">
                                    <span>帖子: 42</span>
                                    <span>回复: 218</span>
                                    <span>关注者: 560</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="profile-actions">
                            <button class="glow-button">编辑资料</button>
                        </div>
                    </div>
                    
                    <div class="profile-tabs">
                        <button class="tab-button active">我的帖子</button>
                        <button class="tab-button">我的回复</button>
                        <button class="tab-button">收藏</button>
                    </div>
                    
                    <div class="user-posts">
                        <div class="content-card">
                            <h4>Three.js实现星云效果的技术细节</h4>
                            <div class="post-meta">
                                <span>发布于: 技术分享</span>
                                <span>时间: 2025-08-12</span>
                            </div>
                            <p>在Qwen Coder项目中，我们使用Three.js创建了令人惊叹的宇宙背景效果。本文将详细介绍实现过程中的关键技术点...</p>
                        </div>
                        
                        <div class="content-card">
                            <h4>微服务架构下的数据一致性解决方案</h4>
                            <div class="post-meta">
                                <span>发布于: 架构设计</span>
                                <span>时间: 2025-08-08</span>
                            </div>
                            <p>在微服务架构中，数据一致性是一个复杂的问题。本文将探讨几种常见的解决方案，包括分布式事务、事件驱动架构等...</p>
                        </div>
                    </div>
                </section>
            </div>
        </main>

        <!-- 全屏发帖编辑器 -->
        <div id="post-editor" class="fullscreen-editor">
            <div class="editor-container">
                <div class="editor-header">
                    <h2>创建新帖子</h2>
                    <div class="editor-actions">
                        <button id="close-editor" class="icon-button">✕</button>
                    </div>
                </div>
                <div class="editor-content">
                    <input type="text" placeholder="输入标题..." class="editor-title">
                    <textarea placeholder="分享你的想法..." class="editor-body"></textarea>
                </div>
                <div class="editor-footer">
                    <button class="glow-button">发布</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入Three.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <!-- 引入主要脚本 -->
    <script src="js/main.js"></script>
</body>
</html>